<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="showSkeleton"></tui-skeleton>
		<view :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
			<view class="flex select">
				<view v-for="(item,index) in topBar" :key="index"  class="select-item" >
					<text  :class="index==topindex?'f-color-active':'f-color'" @click="addclick(index)" >{{item.name}}</text>
				</view>
			</view>
			
			<view v-if="topindex==2" class="flex sortTab">
				<view v-for="(items, indexs) in sortBar" :key="indexs" :class="indexs==sortindex?'activeBtn':'btn'" @click="addclickBtn(indexs)">
					<text>{{items.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- list -->
		<scroll-view scroll-y="true" @scrolltolower="scroll()" style="height: 90vh;">
			<view class="street-box">
				<view style="position: relative;" class="pad-30">
					<view class="sortItem" v-for="(itemn, indexn) in sortlist" :key="itemn.id">
						<!-- 排队中 -->
						<text v-if="topindex==0" class="ranking">排名：{{itemn.sort}}</text>
						<!-- 回馈中 -->
						<view v-if="topindex==1" class="rankHead">
							<view class="rankRound">
								<view class="rankRound2">
									<text>{{itemn.sort}}</text>
								</view>
							</view>
							<view>排名</view>
						</view>
						<!-- 已回馈 -->
						<view v-if="topindex==2 || topindex==3" class="rankHead">
							<view class="rankRound">
								<view class="rankRound2">
									<text style="font-size: 40rpx; font-weight: bold;">￥</text>
								</view>
							</view>
							<view></view>
						</view>
						
						<!-- 中间数据 -->
						<!-- 排队中、回馈中、已回馈 -->
						<view v-if="topindex!=3" class="flex flex-column content" style="flex: 1;">
							<text class="title">{{itemn.martName}}</text>
							<text>订单号：{{itemn.orderNo}}</text>
							<text>{{itemn.createTime}}</text>
						</view>
						<!-- 回馈记录 -->
						<view v-if="topindex==3" class="flex flex-column content" style="flex: 1;">
							<text class="title">{{itemn.userName}}</text>
							<text>公排回馈</text>
							<text>{{itemn.createTime}}</text>
						</view>
						
						<!-- 尾部内容 -->
						<view class="flex flex-column money">
							<view>
								￥
								<text v-if="topindex!=3">{{itemn.orderAmount}}</text>
								<text v-if="topindex==3">{{itemn.amount}}</text>
							</view>
							<view v-if="topindex==1">
								<view style="margin: 14rpx 0;font-size: 11px;">回馈中</view>
								<view class="progress-box" style="width: 100px;font-size: 12px !important;">
									<progress 
									:percent="numFilter(itemn.stackAmount/itemn.orderAmount*100)" 
									show-info 
									stroke-width="6" 
									activeColor="#F7A231"
									backgroundColor="#FFF2E1"
									border-radius="50"/>
								</view>
							</view>
							<view v-if="topindex==2">
								<view style="margin: 14rpx 0;font-size: 11px;">已全额回馈</view>
							</view>
						</view>
					</view>	
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='!loading'></text>
			</view>
			<view v-if="!loading">
				<view class='pictrue' style="margin: 0 auto;text-align: center;">
					<!-- <image src='/static/images/no-shop.png'></image> -->
					<text>{{loadTitle}}</text>
				</view>
			</view>
		</scroll-view>
		
		<pageFooter></pageFooter>
	</view>
</template>

<script>
	let app = getApp();
	import pageFooter from "@/components/pageFooter/index.vue";
	import { getUserSortListApi, getSortListApi } from '@/api/sort.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import Cache from '@/utils/cache';
	import {
		goPage
	} from '@/libs/iframe.js'
	import {
		BACK_URL,
		USER_INFO
	} from '@/config/cache';
	import { mapGetters } from "vuex";
	export default{
		components: {
			pageFooter
		},
		computed: mapGetters(['isLogin','uid']),
		data() {
			return {
				theme: app.globalData.theme,
				skeletonShow: false,
				loadTitle: '',
				loading: true,	//加载中。T-加载中，F-加载结束
				loadend: false,	//是否已到最后一页。T-已到最后，F-未到
				topBar: [{name: '排队中'},{name: '回馈中'},{name: '已回馈'},{name: '回馈记录'}],
				sortBar: [{name: "我的回馈"}, {name: "平台回馈"}],
				topindex: 0,
				sortindex: 0,
				where: {
					pageInfo: {
						page: 1,
						limit: 20
					},
					userId: 0,
					status: 0
				},
				sortlist: []
			}
		},
		onLoad(options) {
			if(this.isLogin){
				this.getUserSortList();
			}else{
				this.openAuto();
			}
		},
		methods: {
			//顶部导航栏点击事件
			addclick(index) {
				let that = this;
				if(that.topindex!=index){
					//改变索引
					that.topindex = index;
					//数据重置
					that.loading = true;
					that.loadend = false;
					that.sortlist = [];
					that.where.pageInfo.page = 1;
					that.sortindex = 0;
					if(index!=3){
						that.where.status = index;
						this.getUserSortList();
					}else{
						this.getSortList();
					}
				}
			},
			//以回馈点击事件
			addclickBtn(index) {
				let that = this;
				if(that.sortindex!=index){
					that.sortindex = index;
					//数据重置
					that.loading = true;
					that.loadend = false;
					that.sortlist = [];
					that.where.pageInfo.page = 1;
					this.getUserSortList();
				}
			},
			//获取当前账号的回馈记录列表
			getUserSortList() {
				//验证登录
				if(this.isLogin){
					let that = this;
					if (that.loadend) return;	//验证是否已到最后一页
					if (!that.loading) return;	//验证是否已经在加载中
					
					//修改查询条件
					if(that.where.status==2 && that.sortindex==1){
						that.where.userId = 0;
					}else{
						that.where.userId = this.uid;
					}
					//调用接口
					getUserSortListApi(that.where).then(res =>{
						let list = res.data.list;
						//拼接列表
						let sortlist = that.$util.SplitArray(list, that.sortlist);
						//判断是否已到最后一页。
						let loadend = list.length < that.where.pageInfo.limit;
						that.loadend = loadend;
						//修改提示语
						that.loadTitle = loadend ? '无更多数据' : ' 下拉加载更多数据';
						that.$set(that, 'sortlist', sortlist);
						that.$set(that.where.pageInfo, 'page', that.where.pageInfo.page + 1);
						//重置加载状态
						that.loading = false;
					}).catch(err => {
						that.loading = false;
						that.loadTitle = '数据加载异常';
					})
				}else{
					this.openAuto();
				}
			},
			//获取回馈列表
			getSortList() {
				if(this.isLogin){
					let that = this;
					if (that.loadend) return;
					if (!that.loading) return;
					getSortListApi(that.where).then(res =>{
						let list = res.data.list;
						let sortlist = that.$util.SplitArray(list, that.sortlist);
						let loadend = list.length < that.where.pageInfo.limit;
						that.loadend = loadend;
						that.loadTitle = loadend ? '无更多数据' : ' 下拉加载更多数据';
						that.$set(that, 'sortlist', sortlist);
						that.$set(that.where.pageInfo, 'page', that.where.pageInfo.page + 1);
						that.loading = false;
					}).catch(err => {
						that.loading = false;
						that.loadTitle = '数据加载异常';
					})
				}else{
					this.openAuto();
				}
			},
			// 打开授权
			openAuto() {
				Cache.set(BACK_URL, '')
				toLogin();
			},
			numFilter (value) {
				// 截取当前数据到小数点后三位
				let tempVal = parseFloat(value).toFixed(2)
				let realVal = tempVal.substring(0, tempVal.length - 1)
				return realVal
			},
			scroll() {
				if(!this.loadend){
					this.loading = true;
					if(this.topindex!=3){
						this.getUserSortList();
					}else{
						this.getSortList();
					}
				}
			}
		}
	}
</script>

<style>
	
	.select{
		background-color: #Fff;
		padding: 20rpx 0 0 0;
		text-align: center;
		font-size: 30rpx;
	}
	.select-item{
		flex: 1;
		padding-bottom: 20rpx;
	}
	.select-item text{
		padding-bottom: 16rpx;
	}
	/* 字体颜色 */
	.f-color{
		color: #6F7C85;
	}
	
	/* 选中字体颜色 */
	.f-color-active{
		color: #F7A231;
		font-weight: bold;
		border-bottom: 6rpx solid;
	}
	
	.sortItem {
		background-color: #fff;
		margin: 20rpx 32rpx 0 32rpx;
		padding: 20rpx 28rpx 20rpx 28rpx;
		border-radius: 24rpx;
		display: flex;
		flex-direction: row;
		position: relative;
	}
	.sortItem .content text{
		color: #979797;
		font-size: 22rpx;
		margin: 10rpx 0;
		/* overflow: hidden;
		white-space:nowrap; 
		text-overflow: ellipsis; */
	}
	.sortItem .content .title{
		color: #343643 !important;
		font-size: 28rpx;
	}
	.sortItem .money{
		justify-content: center;
		text-align: end;
		color: #F7A231 !important;
	}
	.money text{
		color: #F7A231 !important;
		font-size: 40rpx;
		font-weight: bold;
	}
	.ranking{
		background-color: #FFE8CA;
		color: #F7A231 !important;
		padding: 4rpx 20rpx;
		border-radius: 0 24rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
		/* font-size: 10px; */
	}
	.rankHead{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #F7A231 !important;
		margin-right: 20rpx;
	}
	.rankRound{
		background-color: #FFF7EC;
		width: 88rpx;
		height: 88rpx;
		text-align: center;
		border-radius: 100rpx;
		margin-bottom: 10rpx;
		align-items: center;
		display: flex;
		justify-content: center;
	}
	
	.rankRound2{
		background-color: #FFE8CA;
		width: 56rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 100rpx;
		color: #F7A231;
	}
	
	.sortTab{
		background-color: #fff;
		padding: 10px 0;
		justify-content: center;
	}
	.sortTab view{
		border: 4rpx solid #F7A231;
		border-radius: 100rpx;
		padding: 4rpx 10rpx;
		color: #F7A231;
		margin: 0 10rpx;
	}
	.sortTab .btn{
		background-color: #fff;
		color: #F7A231 !important;
	}
	.sortTab .activeBtn{
		background-color: #F7A231;
		color: #fff !important;
	}
	.uni-progress-info{
		font-size: 12px !important;
	}
</style>